<template>
  <div id="main-search" class="main-search">
    <el-form
      ref="searchform"
      inline
      :label-width="labelWidth"
      :model="form_data"
      :rules="searchRules"
    >
      <el-row>
        <!-- <el-col :span="span">
          <el-form-item
            label="常用地址"
            class="item"
            :prop="form_data.Address_value"
          >
            <usual-address
              ref="userAddress"
              :userAddressValue.sync="form_data.Address_value"
            />
          </el-form-item>
        </el-col> -->
        <!-- 添加的个人信息查询项目 -->
        <!-- <FormItem ref="keyword" :value.sync="form_data.keyword"></FormItem> -->
        <el-col
          v-for="(item, index) in searchForm"
          :key="item.prop"
          :span="span !== 5 ? span : (index + 2) % 5 == 0 ? 4 : 5"
        >
          <el-form-item :label="item.label" class="item" :prop="item.prop">
            <!-- 输入框 -->
            <el-input
              v-if="item.type === 'Input'"
              v-model.trim="form_data[item.prop]"
              :style="{ width: '100%' }"
            />
            <!-- 下拉框 -->
            <el-select
              v-if="item.type === 'Select'"
              v-model.trim="form_data[item.prop]"
              :style="{ width: '100%' }"
              @change="item.change(form_data[item.prop])"
            >
              <el-option
                v-for="op in item.options"
                :key="op.value"
                :label="op.label"
                :value="op.value"
              />
            </el-select>
            <!-- 日期 -->
            <el-date-picker
              v-if="item.type === 'data'"
              v-model="form_data[item.prop]"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              :style="{ width: '100%' }"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { eventBus } from "@/main.js"
import UsualAddress from "@/components/UsualAddress/index.vue"

export default {
  name: "MainSearch",
  components: { UsualAddress },
  props: {
    isHandle: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: "mini"
    },
    labelWidth: {
      type: String,
      default: "120px"
    },
    searchForm: {
      type: Array,
      default: []
    },
    searchData: {
      type: Object,
      default: {}
    },
    searchRules: {
      type: Object,
      default: () => {}
    },
    // 配置按钮
    searchHandle: {
      keyword: {},
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      span: 6,
      // Address_value: "", // 常用地址
      // keyword: {}, // 个人信息项
      // 获取form数据
      form_data: {}
    }
  },
  computed: {},
  watch: {
    searchData: {
      handler(newValue) {
        // console.log(newValue)
        this.form_data = newValue
      },
      immediate: true
    }
  },
  created() {
    // 监听传过来的点击事件
    // eventBus.$on("toMainSearch", () => {
    //   this.search()
    // })
    // // 监听重置按钮事件
    // eventBus.$on("toMainSearchReset", message => {
    //   this.reset()
    // })
  },
  mounted() {},
  methods: {
    // 点击按钮
    handle() {},
    // 监听传过来的点击事件 搜索点击
    search() {
      // console.log(this.form_data)
      const search = {}
      // 过滤空字段
      for (const key in this.form_data) {
        if (this.searchData[key]) {
          search[key] = this.form_data[key]
        }
      }
      // 常用地址
      if (this.$refs.userAddress && this.form_data.Address_value) {
        search.Address_value = this.form_data.Address_value
      }
      // 个人信息字段
      if (
        this.$refs.keyword &&
        this.form_data.keyword.key &&
        this.form_data.keyword.value
      ) {
        search[this.form_data.keyword.key] = this.form_data.keyword.value
      }
      console.log(search)
      // 调用接口
      // this.$emit("callbackComponent", {
      //   function: "search",
      //   data: search
      // })
    },
    // 重置
    reset() {
      this.$refs.searchform.resetFields()
      // 常用地址
      if (this.$refs.userAddress) {
        this.$refs.userAddress.clear()
        this.form_data.Address_value = ""
      }
      // 个人信息项目
      console.log(this.$refs.keyword)
      if (this.$refs.keyword) {
        this.$refs.keyword.clear()
        this.form_data.keyword = {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main-search {
  padding-top: 15px;
  .item {
    width: 100%;
    display: flex;
    /deep/.el-form-item__content {
      flex: 1;
    }
  }
  .marginLeft {
    margin-left: 20px;
  }
}
</style>
